In [1]:

from ipywidgets import *

In [2]:

words = ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed " +
         "do eiusmod tempor incididunt ut labore et dolore magna aliqua.").split(' ')

items = [HTML('''
<div style="background-color: steelblue;
            padding: 5px;
            color: white;
            font-size: large;
            min-height: 22px;
            text-align: center;">
%s
</div>
''' % w) for w in words]

Column Layout¶

Natural width for items¶

In [3]:

layout = Layout(display='flex', flex_flow='column')
box = Box(children=items, layout=layout)
box

Align items¶

In [4]:

# center
box.layout.align_items = 'center'

In [5]:

# flex-end
box.layout.align_items = 'flex-end'

In [6]:

# stretch
box.layout.align_items = 'stretch'

In [7]:

# back to default flex-start
box.layout.align_items = 'flex-start'

In [8]:

# back to stretch with smaller width and border
box.layout.border = 'solid 4px'
box.layout.width = '400px'
box.layout.align_items = 'stretc